<template>
    <div>
        <div class="title">
            <el-input maxlength="15" style="width:200px;" placeholder="按端口编号搜索" v-model="search"></el-input>
            <el-button @click="getCardList" type="primary" style="margin-left:20px;" icon="el-icon-search">搜索</el-button>

            <el-button @click="addHandler" type="primary" style="margin-left:20px;" icon="el-icon-plus">新增</el-button>
        </div>
        <div class="data">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column type="index" align="center" label="序号" min-width="80"></el-table-column>
              <el-table-column prop="pileType" align="center" label="充电桩类型 " :formatter="cpPileType" min-width="80"></el-table-column>

              <!--                <el-table-column prop="deviceid" label="枪口" align="center" min-width="80"></el-table-column>-->

                <el-table-column prop="name" align="center" label="端口名" min-width="80"></el-table-column>
                <el-table-column prop="deviceid" align="center" label="端口编号" min-width="80"></el-table-column>
<!--                <el-table-column prop="power" align="center" label="电量" min-width="80"></el-table-column>-->
<!--                <el-table-column prop="totalPowerConsumption" align="center" label="耗电总量"-->
<!--                                 min-width="80"></el-table-column>-->

                <el-table-column
                        prop="state"
                        align="center"
                        :formatter="forState"
                        label="状态"
                        min-width="80"
                ></el-table-column>
                <el-table-column prop="parkid" align="center" label="充电桩编号" min-width="100"></el-table-column>
<!--                <el-table-column prop="pileType" align="center" label="设备类型" min-width="80"></el-table-column>-->
                <el-table-column prop="createtime" label="创建时间" align="center" min-width="120"></el-table-column>
                <el-table-column label="操作" align="center" min-width="180">
                    <template slot-scope="scope">
                        <el-link @click="editCardHandler(scope.row)" >枪口编辑</el-link>
                        <!-- <el-link @click="getUseRecodsHandler(scope.row)">使用记录</el-link> -->
                        <el-link @click="deleteHandler(scope.row)">删除</el-link>
                        <el-link size="mini" round @click="switchPort(scope.row.id,1)" v-show="scope.row.state !='N' && scope.row.state !='Y'">开启</el-link>
                        <el-link size="mini" round @click="switchPort(scope.row.id,0)" v-show="scope.row.state!='F'">关闭</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="total"
            ></el-pagination>
        </div>
        <el-dialog :title="popupModalTitle" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :model="formData" label-width="100px" :rules="formRule">
              <el-form-item class="nav-form-item" label="充电桩类型" prop="name">
                <el-select style="width:200px" v-model="formData.pileType" placeholder="请选择" disabled>
                  <el-option label="快充" value="1"></el-option>
                  <el-option label="慢充" value="0"></el-option>
                </el-select>
              </el-form-item>
                <el-form-item class="nav-form-item" label="端口编号" prop="deviceid">
                    <el-input
                            maxlength="10"
                            :disabled="!isAdd"
                            v-model="formData.deviceid"
                            style="width:300px;"
                            placeholder="请输入端口编号"
                            clearable
                    />
                </el-form-item>
                <el-form-item class="nav-form-item" label="端口名称" prop="name">
                    <el-input maxlength="20" v-model="formData.name" style="width:300px;" placeholder="请输入端口名称"
                              clearable/>
                </el-form-item>
                <el-form-item class="nav-form-item" label="端口状态" prop="state">
                    <el-radio v-model="formData.state" label="Y">占用</el-radio>
                    <el-radio v-model="formData.state" label="N">未占用</el-radio>
                    <el-radio v-model="formData.state" label="F">故障</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="isDisable" @click="confimHandler">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    import {getPortList, delPort, addPort, editPort} from '@/api/port'
    import {getDataScopeList} from '@/api/user'
    import {getToken} from '@/utils/auth'
    import {switchPort} from "../../api/port";

    export default {
        data() {
            return {
                isDisable: false,
                dialogVisible: false,
                date: '',
                isAdd: true,
                search: '',
                tableData: [],
                page: 1,
                pageSize: 10,
                loading: true,
                formData: {
                    deviceid: '',
                    name: '',
                    pileType:'',
                    parkid: this.id,
                    state: ''
                },
                total: 0,

                formRule: {
                    deviceid: [{required: true, message: '请输入端口编号', trigger: 'blur'}],
                    name: [{required: true, message: '请输入端口名称', trigger: 'blur'}],
                    state: [{required: true, message: '请选择端口状态', trigger: 'blur'}]
                },
                popupModalTitle: "新增"
            }
        },
        created() {
            this.getCardList()
        },
        computed: {
            id() {
                return this.$route.query.id
            },
            pileType() {
                return this.$route.query.pileType+''
            },
        },
        methods: {
            cpPileType(row) {
              if (row.pileType == 1) {
                return '快充'
              } else if (row.pileType == 0) {
                return '慢充'
              }
            },
            switchPort(id, type) {
                let params = {
                    id: id,
                    type: type
                }
                switchPort(params).then(res => {
                    if (res.message.code == 0) {
                        this.$message({
                            message: (type==1?'端口开启':'端口关闭')+'成功',
                            type: 'success'
                        })
                      this.getCardList();
                    } else {
                        this.$message({
                            message: res.message.message,
                            type: 'success'
                        })
                    }
                })
            },
            forState(row) {
                if (row.state == 'Y') {
                    return '占用'
                } else if (row.state == 'N') {
                    return '未占用'
                } else if (row.state == 'F') {
                    return '故障'
                }
            },
          cppileType(row) {
            if (row.pileType == 2) {
              return '二轮车'
            } else if (row.pileType == 4) {
              return '四轮车'
            }
          },
            getCardList() {
                this.loading = true
                let param = {
                    id: this.id,
                    pageNo: this.page,
                    pageSize: this.pageSize,
                    deviceid: this.search
                }
                getPortList(param).then(res => {
                    if (res.data) {
                        this.tableData = res.data.records.map((item)=>{
                          item.pileType = this.pileType;
                          return item;
                        })
                        this.total = res.data.total
                    }

                    this.loading = false
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getCardList()
            },
            addHandler() {
                this.isAdd = true
                this.formData.pileType = this.pileType+'';
                this.formData.deviceid = ''
                this.formData.name = ''
                this.formData.parkid = this.id
                this.formData.state = ''
                this.popupModalTitle = "新增"
                this.dialogVisible = true
            },
            confimHandler() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.isAdd) {
                            this.add()
                        } else {
                            this.edit()
                        }
                    }
                })
            },
            deleteHandler(row) {
                this.$confirm('确定删除所选项吗?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        id: row.id
                    }
                    delPort(param).then(res => {
                        if (res.message.code == 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.getCardList()
                        } else {
                            this.$message.error(res.message.message)
                        }
                    })
                })
            },
            editCardHandler(row) {
                this.isAdd = false
                this.formData.pileType = this.pileType+'';
                this.formData.deviceid = row.deviceid
                this.formData.name = row.name
                this.formData.parkid = row.parkid
                this.formData.state = row.state
                this.formData.id = row.id
                this.popupModalTitle = "编辑"
                //   deviceid
                this.dialogVisible = true
            },
            edit() {
                this.isDisable = true
                editPort(this.formData).then(res => {
                    if (res.message.code == -1) {
                        this.$message.error(res.data)
                    } else {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                        this.isDisable = false
                        this.dialogVisible = false
                        this.getCardList()
                    }
                })
            },
            add() {
                this.isDisable = true
                addPort(this.formData).then(res => {
                    if (res.message.code == -1) {
                        this.$message.error(res.data)
                    } else {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                        this.isDisable = false
                        this.dialogVisible = false
                        this.getCardList()
                    }
                })
            },
            getUseRecodsHandler(row) {
                this.$router.push({
                    path: 'card/useRecods',
                    query: {
                        cardNo: row.cardNo
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .title {
        margin-left: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
    }

    .data {
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 10px;
    }
</style>
